<template>
  <el-dialog
    title="设备关联站点"
    :visible.sync="dialogVisible"
    width="80%"
    center
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="flex">
        <el-form-item label="所属商户号:" prop="merchantNo">
          <el-select
            v-model="ruleForm.merchantNo"
            placeholder="请选择所属商户号"
            @change="merchantSelected"
          >
            <el-option
              v-for="item in merchantNoList"
              :key="item.id"
              :label="item.merchant_Num"
              :value="item.merchant_Num"
            >
              <span class="pr-5">{{ item.merchant_Num }}</span>
              <span>({{ item.store_Name }})</span>
            </el-option>
          </el-select>
          <div class="tips color-red">
            <i type="primary" class="el-icon-warning-outline"></i>
            请务必认真审阅商户号对应所属关系
          </div>
        </el-form-item>
        <el-form-item label="所属关系:" v-if="merchantList.length">
          <p v-if="merchantList.length === 1">
            {{ merchantList[0].store_Name }}
          </p>
          <div class="name-list" v-else>
            <div v-for="(item, index) in merchantList" :key="index">
              <div class="item">
                <div class="item-left">{{ item.merchant_TypeName }}：</div>
                <div>{{ item.store_Name }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>

      <el-form-item label="所属洗车站:" prop="station">
        <el-select v-model="ruleForm.station" placeholder="请选所属洗车站">
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.station_Name"
            :value-key="item.id"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备编号:" class="pt-40">
        <div>{{ params.washMachineId }}</div>
      </el-form-item>
      <el-form-item label="平台编号">
        <div>{{ params.machineCode || "--" }}</div>
        <div class="tips color-red">*编码自动生成不可修改</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')"
          >确定添加</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "bindStation",
  data() {
    return {
      ruleForm: {
        merchantNo: "",
        name: "",
        station: ""
      },
      rules: {
        merchantNo: [{ required: true, message: "请选择所属商户号" }],
        station: [{ required: true, message: "请选择所属洗车站" }]
      },
      merchantNoList: [],
      stationList: [],
      merchantList: [] //商户号所属关系列表
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getStoreMerchant();
      }
    }
  },

  methods: {
    // 商户号列表
    getStoreMerchant() {
      this.$api.equipments
        .getStoreMerchant()
        .then(res => {
          this.merchantNoList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 选择商户
    merchantSelected(e) {
      this.ruleForm.station = "";
      this.getMerchantInfo(e);
      this.getStationList(e);
    },

    // 获取商户号所属信息
    getMerchantInfo(id) {
      this.$api.equipments
        .getMerchantInfo({ merchant_num: id })
        .then(res => {
          this.merchantList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取洗车站列表
    getStationList(id) {
      this.$api.equipments
        .getStation({ merchant_Num: id })
        .then(res => {
          this.stationList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 提交
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.equipments
            .bindStation({
              self_Service_Car_Wash_Machine_Id: this.params.id,
              self_Service_Car_Wash_Station_Id: this.ruleForm.station,
              wash_Machine_Id: this.params.washMachineId
            })
            .then(res => {
              this.$refs[formName].resetFields();
              this.merchantList = [];
              this.$emit("confirmBind", res.data);
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.merchantList = [];
      this.$emit("closeBind");
    }
  }
};
</script>
<style lang="scss" scoped>
.pt-40 {
  padding-top: 40px;
}
.name-list {
  border: 1px solid #ccc;
  padding: 0 20px;
}
.item {
  display: flex;
}
.item-left {
  text-align: right;
  padding-right: 10px;
}
</style>
